<template>
<div class="container">
  <div id="Map" ref="map"></div>
  <div class="btn-con flex-center">
    <div :class="['btn flex-center',tabChoosed==='shuju'?'actived':'']" @click="toggleBtn('shuju')">
      {{defaultAdd}}
      <div class="select-con flex-center-column" v-show="tabChoosed==='shuju'">
        <div v-for="(item,index) in citys" :key="index" :class="[item===defaultAdd?'actived':'']" class="select flex-center" @click="chooseAdd(item)">{{item.bmName}}</div>
      </div>
    </div>
    <div :class="['btn flex-center',tabChoosed==='zc'?'actived':'']" @click="toggleBtn('zc')">
      {{defaultSD}}
      <div class="select-con" v-show="tabChoosed==='zc'">
        <div v-for="(item,index) in SDs" :key="index" class="select flex-center" @click="chooseSD(item.bm)">{{item.mc}}</div>
      </div>
    </div>
    <div :class="[isShowSD?'actived':'']" class="option-con flex-center" v-show="tabChoosed==='zc'" @click="toggleSDs">
      <div class="big-circle flex-center">
        <div class="small-circle"></div>
      </div>
      <div class="tit">总体SD能力</div>
    </div>
  </div>
  <!-- 切换全国地图 -->
  <div class="global" @click="toggleGlobal">
  </div>
</div>
</template>

<script>
/* eslint-disable */
import "ol/ol.css";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import XYZ from "ol/source/XYZ";
import {
  huijuTooltip
} from './tooltip.js'
import {
  Map,
  View,
  Feature,
  ol
} from "ol";
import {
  Style,
  Stroke,
  Fill
} from "ol/style";
import {
  Polygon,
  MultiPolygon
} from "ol/geom";
import {
  defaults as defaultControls
} from "ol/control";
import MousePosition from "ol/control/MousePosition.js";
import EChartsLayer from "ol-echarts";
import china from "@/utils/china.json";
import china_no_province from "@/utils/china_no_province.json";
//散点图图标
import {
  greenPlane,
  yellowPeople
} from "@/utils/base64.js";
//鼠标事件  用来获取坐标
import {
  format
} from "ol/coordinate";
export default {
  props: {
    isShowElemen: {
      default: true
    },
  },
  data() {
    return {
      map: null,
      routeLayer: null,
      routeFeature: null,
      lineData: [],
      series: [],
      defaultSeries: [],
      echartslayer: null,
      tabChoosed: "shuju", // 地图切换按钮
      isShowSD: false,
      centerCoodinate: [110, 32], //  数据汇聚地图中心点  暂时设置为粗略估计的坐标  后期更改！
      southCoodinate: [110, 22], //  ZC态势地图中心点
      defaultAdd: "zc态势",
      defaultSD: "SD能力",
      SDs: ['sd1', 'sd2'],
      citys: ['广州', '昆明'],
      choosedCity: '',
      // defineSD: [],
      // imgSD1: '',
      // imgSD2: '',
      // imgSD3: '',
      // imgSD4: '',
      // imgSD5: '',
    };
  },
  created() {
    this.$api.typeInfo().then(res => {
      this.citys = res.data.zcInfos
      this.SDs = res.data.sds
    })
  },
  mounted() {
    this.initMap();
    this.initChart();
    this.addArea(china, china_no_province);
  },
  methods: {
    toggleBtn(e) {
      this.tabChoosed = e;
    },
    toggleGlobal() {
      this.setMapCenter(this.centerCoodinate, 4);
    },
    chooseAdd(e) {
      // this.defaultAdd = e;
      this.choosedCity = e.bm
      if (e.bmName === "昆明") {
        this.setMapCenter([102.9199, 25.4663], 10);
      } else if (e.bmName === "广州") {
        this.setMapCenter([113.5107, 23.2196], 8);
      }
    },
    chooseSD(e) {
      console.log(this.choosedCity, e)
      this.toggleSD(this.choosedCity, e, 'toggleSD')
    },
    //动态设置地图中心dian
    setMapCenter(center, zoom) {
      this.map.getView().setCenter(center);
      this.map.getView().setZoom(zoom);
    },
    //SD散点图
    toggleSDs() {
      this.isShowSD = !this.isShowSD;
      this.toggleSD();
    },
    //  显示SD 散点图
    async toggleSD(zc, sdlb, type) {
      console.log(66666, type)
      let defineSDOrigin = await this.$api.sdScopes({
        zc: zc ? zc : "",
        sdlb: sdlb ? sdlb : "",
      })
      let defineSD = defineSDOrigin.data.map(item => {
        return {
          value: item.lonAndLat
        }
      })
      let SDData = {
        name: "SDALL",
        type: "scatter",
        coordinateSystem: "geo",
        showEffectOn: "render",
        zlevel: 10,
        hoverAnimation: true,
        tooltip: {
          show: false,
        },
        symbolSize: [22, 30],
        symbol: await this.$imgToBase64(require('@/assets/map/sd@2x.png')),
        symbolOffset: ["0%", "-50%"],
        data: defineSD,
      };

      this.series = this.series.filter(item => ["SDALL"].indexOf(item.name) < 0)
      if (this.isShowSD || type === 'toggleSD') {
        this.series.push(SDData);
      }
      this.echartslayer.clear()
      this.echartslayer.setChartOptions({
        background: "transparent",
        tooltip: {},
        series: this.series,
        geo: {},
      }, true)
      // console.log(789, this.series.length, this.series.filter(item => ["SDALL"].indexOf(item.name) < 0).length)
    },
    // 初始化地图
    initMap() {
      let map = new Map({
        target: "Map",
        // controls: defaultControls({
        //   attribution: false,
        //   zoom: false,
        //   rotate: false,
        //   doubleClickZoom: false, // 取消双击放大功能交互
        //   mouseWheelZoom: false, // 取消滚动鼠标中间的滑轮交互
        //   shiftDragZoom: false, // 取消shift+wheel左键拖动交互
        // }).extend([]),
        controls: [],
        interactions: [],
        layers: [
          new TileLayer({
            source: new XYZ({
              // url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
              url: "./satellite/{z}/{x}/{y}.jpg",
            }),
          }),
          //  new ol.layer.Tile({source: new ol.source.OSM()})
        ],
        view: new View({
          projection: "EPSG:4326",
          // center: [114.48, 38.03],
          center: this.centerCoodinate,
          zoom: 4,
          // maxZoom: 4,
          // minZoom: 4,
        }),
      });

      // // 监听singleclick事件
      map.on("singleclick", function (event) {
        console.log(666, map.getEventCoordinate(event));
      });

      //鼠标获取坐标控件
      // const mousePositionControl = new MousePosition({
      //   coordinateFormat: function (coordinate) {
      //     return format(coordinate, "经度:{x}<br/>纬度:{y}", 2);
      //   },
      //   projection: "EPSG:4326",
      //   className: "coodinate",
      //   target: document.getElementById("coodinate"),
      //   undefinedHTML: " ",
      // });
      // //添加控件到地图
      // map.addControl(mousePositionControl);

      this.map = map;
    },
    //echarts图层初始化
    async initChart() {
      // 中国主要城市 地理坐标
      let geoCoordMap = {
        上海: [121.4648, 31.2891],
        东莞: [113.8953, 22.901],
        东营: [118.7073, 37.5513],
        中山: [113.4229, 22.478],
        临汾: [111.4783, 36.1615],
        临沂: [118.3118, 35.2936],
        丹东: [124.541, 40.4242],
        丽水: [119.5642, 28.1854],
        乌鲁木齐: [87.9236, 43.5883],
        佛山: [112.8955, 23.1097],
        保定: [115.0488, 39.0948],
        兰州: [103.5901, 36.3043],
        包头: [110.3467, 41.4899],
        北京: [116.4551, 40.2539],
        北海: [109.314, 21.6211],
        南京: [118.8062, 31.9208],
        南宁: [108.479, 23.1152],
        南昌: [116.0046, 28.6633],
        南通: [121.1023, 32.1625],
        厦门: [118.1689, 24.6478],
        台州: [121.1353, 28.6688],
        合肥: [117.29, 32.0581],
        呼和浩特: [111.4124, 40.4901],
        咸阳: [108.4131, 34.8706],
        哈尔滨: [127.9688, 45.368],
        唐山: [118.4766, 39.6826],
        嘉兴: [120.9155, 30.6354],
        大同: [113.7854, 39.8035],
        大连: [122.2229, 39.4409],
        天津: [117.4219, 39.4189],
        太原: [112.3352, 37.9413],
        威海: [121.9482, 37.1393],
        宁波: [121.5967, 29.6466],
        宝鸡: [107.1826, 34.3433],
        宿迁: [118.5535, 33.7775],
        常州: [119.4543, 31.5582],
        广州: [113.5107, 23.2196],
        廊坊: [116.521, 39.0509],
        延安: [109.1052, 36.4252],
        张家口: [115.1477, 40.8527],
        徐州: [117.5208, 34.3268],
        德州: [116.6858, 37.2107],
        惠州: [114.6204, 23.1647],
        成都: [103.9526, 30.7617],
        扬州: [119.4653, 32.8162],
        承德: [117.5757, 41.4075],
        拉萨: [91.1865, 30.1465],
        无锡: [120.3442, 31.5527],
        日照: [119.2786, 35.5023],
        昆明: [102.9199, 25.4663],
        杭州: [119.5313, 29.8773],
        枣庄: [117.323, 34.8926],
        柳州: [109.3799, 24.9774],
        株洲: [113.5327, 27.0319],
        武汉: [114.3896, 30.6628],
        汕头: [117.1692, 23.3405],
        江门: [112.6318, 22.1484],
        沈阳: [123.1238, 42.1216],
        沧州: [116.8286, 38.2104],
        河源: [114.917, 23.9722],
        泉州: [118.3228, 25.1147],
        泰安: [117.0264, 36.0516],
        泰州: [120.0586, 32.5525],
        济南: [117.1582, 36.8701],
        济宁: [116.8286, 35.3375],
        海口: [110.3893, 19.8516],
        淄博: [118.0371, 36.6064],
        淮安: [118.927, 33.4039],
        深圳: [114.5435, 22.5439],
        清远: [112.9175, 24.3292],
        温州: [120.498, 27.8119],
        渭南: [109.7864, 35.0299],
        湖州: [119.8608, 30.7782],
        湘潭: [112.5439, 27.7075],
        滨州: [117.8174, 37.4963],
        潍坊: [119.0918, 36.524],
        烟台: [120.7397, 37.5128],
        玉溪: [101.9312, 23.8898],
        珠海: [113.7305, 22.1155],
        盐城: [120.2234, 33.5577],
        盘锦: [121.9482, 41.0449],
        石家庄: [114.4995, 38.1006],
        福州: [119.4543, 25.9222],
        秦皇岛: [119.2126, 40.0232],
        绍兴: [120.564, 29.7565],
        聊城: [115.9167, 36.4032],
        肇庆: [112.1265, 23.5822],
        舟山: [122.2559, 30.2234],
        苏州: [120.6519, 31.3989],
        莱芜: [117.6526, 36.2714],
        菏泽: [115.6201, 35.2057],
        营口: [122.4316, 40.4297],
        葫芦岛: [120.1575, 40.578],
        衡水: [115.8838, 37.7161],
        衢州: [118.6853, 28.8666],
        西宁: [101.4038, 36.8207],
        西安: [109.1162, 34.2004],
        贵阳: [106.6992, 26.7682],
        连云港: [119.1248, 34.552],
        邢台: [114.8071, 37.2821],
        邯郸: [114.4775, 36.535],
        郑州: [113.4668, 34.6234],
        鄂尔多斯: [108.9734, 39.2487],
        重庆: [107.7539, 30.1904],
        金华: [120.0037, 29.1028],
        铜川: [109.0393, 35.1947],
        银川: [106.3586, 38.1775],
        镇江: [119.4763, 31.9702],
        长春: [125.8154, 44.2584],
        长沙: [113.0823, 28.2568],
        长治: [112.8625, 36.4746],
        阳泉: [113.4778, 38.0951],
        青岛: [120.4651, 36.3373],
        韶关: [113.7964, 24.7028],
      };
      let originData = [{
          capital: "福州",
          value: 20
        },
        {
          capital: "昆明",
          value: 12
        },
        {
          capital: "乌鲁木齐",
          value: 14
        },
        {
          capital: "拉萨",
          value: 14
        },
        {
          capital: "上海",
          value: 14
        },
        {
          capital: "合肥",
          value: 14
        },
      ];
      //  飞线数据
      let lineOriginData = [{
          fromName: "乌鲁木齐",
          toName: "北京"
        },
        {
          fromName: "拉萨",
          toName: "北京"
        },
        {
          fromName: "杭州",
          toName: "北京"
        },
        {
          fromName: "南昌",
          toName: "北京"
        },
        {
          fromName: "上海",
          toName: "北京"
        },
        {
          fromName: "昆明",
          toName: "北京"
        },
      ];
      //  数据整合  提取地理坐标
      let scatterData = originData.map((item) => {
        return {
          name: item.capital,
          value: geoCoordMap[item.capital].concat([item.value]),
        };
      });
      let lineData = lineOriginData.map((item) => {
        return {
          coords: [geoCoordMap[item.fromName], geoCoordMap[item.toName]],
        };
      });
      this.series.push({
        name: "map",
        type: "map",
        map: "china",
        geoIndex: 0,
        roam: false,
        data: originData,
        tooltip: {
          show: false,
        },
      }, {
        name: "effectScatter",
        type: "effectScatter",
        coordinateSystem: "geo",
        showEffectOn: "render",
        zlevel: 10,
        rippleEffect: {
          period: 15,
          scale: 4,
          brushType: "stroke",
        },
        hoverAnimation: true,
        itemStyle: {
          normal: {
            color: "#00ff78",
            shadowBlur: 10,
            shadowColor: "#333",
          },
        },
        symbolSize: (val) => {
          return val[2] / 2;
        },
        tooltip: {
          show: false,
          formatter: function (params) {
            return "实时流量  125kb/s";
          },
        },
        label: {
          normal: {
            show: true,
            formatter: "{b}",
            position: ["-20%", "200%"],
            color: "#5cdbc6",
          },
          emphasis: {
            color: "white",
          },
        },
        data: scatterData,
      }, {
        name: "lines",
        type: "lines",
        coordinateSystem: "geo",
        zlevel: 2,
        effect: {
          show: true,
          period: 4,
          trailLength: 0.4,
          symbol: "arrow",
          symbolSize: 7,
        },
        lineStyle: {
          normal: {
            color: "#0b9482",
            opacity: 0.1,
            curveness: 0.3,
          },
        },
        tooltip: {
          show: true,
          triggle: "item",
          // position: "inside",
          formatter: function (params) {
            return "实时流量  125kb/s";
          },
        },
        data: lineData,
      });

      let definePlane = [{
          value: [99, 18]
        },
        {
          value: [107, 13]
        },
        {
          value: [93, 20]
        },
      ];
      //  人图标散点数据
      let definePeople = [{
          value: [104, 14]
        },
        {
          value: [120, 16]
        },
        {
          value: [92, 23]
        },
      ];
      //  飞机航线路径
      let definePlaneLines = [
        [
          [88, 16],
          [93, 20],
        ],
        [
          [98, 13],
          [99, 18],
        ],
        [
          [112, 10],
          [107, 13],
        ],
      ];
      let Plane = {
        name: "Plane",
        type: "scatter",
        coordinateSystem: "geo",
        showEffectOn: "render",
        zlevel: 10,
        hoverAnimation: true,
        tooltip: {
          show: false,
        },
        symbolSize: [30, 30],
        symbol: greenPlane,
        symbolOffset: ["0%", "-50%"],
        data: definePlane,
      };
      let yellowPeopleScatter = {
        name: "yellowPeople",
        type: "scatter",
        coordinateSystem: "geo",
        showEffectOn: "render",
        zlevel: 10,
        hoverAnimation: true,
        tooltip: {
          show: false,
        },
        symbolSize: [31, 22],
        symbol: yellowPeople,
        symbolOffset: ["0%", "-50%"],
        data: definePeople,
      };
      let PlaneLines = {
        name: "PlaneLines",
        type: "lines",
        coordinateSystem: "geo",
        zlevel: 1,
        effect: {
          show: true,
          period: 4,
          trailLength: 0.4,
          symbol: "roundRect",
          symbolSize: 3,
        },
        lineStyle: {
          normal: {
            color: "#fd6e3a",
            opacity: 0.1,
            curveness: 0.3,
          },
        },
        tooltip: {
          show: false,
        },
        data: definePlaneLines,
      };
      //  判断是否重复添加  只添加一次
      if (this.series.filter((item) => item.name === "Plane").length !== 0) {
        return false;
      }
      // if (this.series.filter((item) => item.name === "PlaneLines").length !== 0) {
      //   return false;
      // }
      // if (this.series.filter((item) => item.name === "yellowPeople").length !== 0) {
      //   return false;
      // }
      this.series.push(Plane);
      this.series.push(PlaneLines);
      this.series.push(yellowPeopleScatter);
      this.defaultSeries = this.series
      this.echartslayer = new EChartsLayer({
        background: "transparent",
        tooltip: {},
        series: this.series,
        geo: {},
      }, {
        // source: "",
        // destination: "",
        // hideOnMoving: true,
        // forcedRerender: false,
        // forcedPrecomposeRerender: false,
      });
      this.echartslayer.appendTo(this.map);
    },
    // 设置区域
    addArea(china, china_no_province) {
      let features = [];
      china.features.forEach((g, i) => {
        // console.log(g);
        let lineData = g;
        let routeFeature = "";
        // console.log(lineData.geometry.type);
        if (lineData.geometry.type == "MultiPolygon") {
          routeFeature = new Feature({
            geometry: new MultiPolygon(lineData.geometry.coordinates),
          });
        } else if (lineData.geometry.type == "Polygon") {
          routeFeature = new Feature({
            geometry: new Polygon(lineData.geometry.coordinates),
          });
        }
        // let color = "blue";
        // defineData.forEach((item) => {
        //   if (lineData.properties.name == item.name) {
        //     color = item.itemStyle.color;
        //   }
        // });
        routeFeature.setStyle(
          new Style({
            fill: new Fill({
              color: "rgba(225,225,225,0)", //填充颜色
            }),
            stroke: new Stroke({
              width: 1, //边界宽度
              color: "#b0b5bc", //边界颜色
            }),
          })
        );
        features.push(routeFeature);
      });
      // 设置省份边界图层
      let routeLayer = new VectorLayer({
        source: new VectorSource({
          features: features,
        }),
      });
      // //  设置中国地图阴影
      // let shadowLayer = new VectorLayer({
      //   source: new VectorSource({
      //     features: china_no_province,
      //   }),
      // });
      // 添加图层
      this.map.addLayer(routeLayer);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 10.8rem;

  #Map {
    width: 100%;
    height: 100%;
  }

  .btn-con {
    position: absolute;
    top: 1.22rem;
    left: 5.1rem;
    // width: 2rem;
    height: 0.45rem;
    color: #7ff0fd;
    font-size: 0.13rem;

    .btn {
      margin: 0.06rem;
      width: 1.04rem;
      height: 100%;
      background-image: url(~@/assets/common/tab-2@2x.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      position: relative;

      .select-con {
        position: absolute;
        top: 0.4rem;
        width: 0.88rem;
        // height: 0.9rem;
        background: rgba(18, 21, 73, 0.45);
        border: 1px solid #3D46C9;
      }

      .select {
        // padding: 0.06rem 0rem;
        width: 100%;
        height: 0.3rem;
        line-height: 0.3rem;
        position: relative;

        // background-image: url(~@/assets/common/tab-2@2x.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;

        &:hover {
          background-image: url(~@/assets/common/select@2x.png);
        }

        &:actived {
          background-image: url(~@/assets/common/select@2x.png);
        }

        &::before {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          width: 0.5rem;
          margin-left: -0.25rem;
          height: 1px;
          background: #4B538D;
          opacity: 0.5;
        }

        &::last-child {
          display: none;

          &::before {
            display: none;
          }
        }
      }

      &.actived {
        background-image: url(~@/assets/common/tab-1@2x.png);
      }
    }

    .option-con {
      .big-circle {
        overflow: hidden;
        width: 0.54rem;
        height: 0.54rem;
        border: 0.01rem solid #7be3ef;
        border-radius: 50%;
        // transform: scale(0.25);
        zoom: (0.25);

        .small-circle {
          margin: auto;
          width: 0.32rem;
          height: 0.32rem;
          background: #62878b;
          border-radius: 50%;
        }
      }

      .tit {
        margin-left: 0.1rem;
      }

      &.actived {
        .small-circle {
          background: #7be3ef;
        }
      }
    }
  }

  .global {
    position: absolute;
    top: 1.5rem;
    width: 0.75rem;
    height: 0.14rem;
    left: 12.38rem;
    background-image: url(~@/assets/map/global.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}
</style>
